<template>
	<div class="tables" ref="tableRef">
		<table>
			<tbody>
				<tr class="header">
					<td v-for="header in headers" :key="header">{{ header }}</td>
				</tr>
				<tr v-for="row in data" :key="row">
					<td v-for="cell in row" :key="cell">
						{{ cell }}
					</td>
				</tr>
			</tbody>
		</table>
		<div @click="close">关闭</div>
	</div>
</template>

<script setup>
	import { ref, defineProps, defineEmits, watch, onMounted } from 'vue'
	const tableRef = ref(null)
	const headers = ref(['A', 'B', 'C'])
	const data = ref([
		[1, 2, 3],
		[4, 5, 6],
		[7, 8, 9]
	])
	const props = defineProps({
		tableData: {
			type: Object,
			default: () => {}
		}
	})
	const emits = defineEmits(['close'])
	onMounted(() => {
		console.log(props.tableData)
		tableRef.value.style.left = props.tableData.x + 'px'
		tableRef.value.style.top = props.tableData.y + 'px'
	})
	watch(() => props.tableData, (newValue, oldValue) => {
		console.log(newValue)
		tableRef.value.style.left = newValue.x + 'px'
		tableRef.value.style.top = newValue.y + 'px'
	})
	const close = () => {
		emits('close')
	}
</script>

<style scoped>
	.tables {
		border: 1px solid #000;
		position: fixed;
		width: 500px;
		background: #fff;
		height: 350px;
		padding: 10px;
	}
	table {
		width: 100%;
	}
	td {
		border-bottom: 1px solid #000;
		line-height: 2;
	}
	.header td {
		font-weight: bold;
	}
</style>
